<template>
  <el-card>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="200px"
      class="demo-ruleForm"
      status-icon
    >
      <el-form-item label="属性名称" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>
      <el-form-item label="商品类型">
        <el-select v-model="ruleForm.productType" placeholder="请选择类型">
          <el-option
            v-for="item in ppptype"
            :label="item.name"
            :value="item.name"
          />
          <!-- <el-option label="Zone two" value="beijing" /> -->
        </el-select>
      </el-form-item>
      <el-form-item label="分类筛选样式">
        <el-radio-group v-model="ruleForm.filterType">
          <el-radio :label="0">普通</el-radio>
          <el-radio :label="1">颜色</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="能否进行检索">
        <el-radio-group v-model="ruleForm.searchType">
          <el-radio :label="0">不需要检索</el-radio>
          <el-radio :label="1">关键字检索</el-radio>
          <el-radio :label="2">范围检索</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="商品属性关联">
        <el-radio-group v-model="ruleForm.relatedStatus">
          <el-radio :label="0">是</el-radio>
          <el-radio :label="1">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="属性是否可选">
        <el-radio-group v-model="ruleForm.selectType">
          <el-radio :label="0">唯一</el-radio>
          <el-radio :label="1">单选</el-radio>
          <el-radio :label="2">复选</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="属性值的录入方式">
        <el-radio-group v-model="ruleForm.inputType">
          <el-radio :label="0">手工录入</el-radio>
          <el-radio :label="1">从下面列表中选择</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="属性值可选值列表">
        <el-input v-model="ruleForm.inputList" type="textarea" />
      </el-form-item>
      <el-form-item label="是否支持生动新增">
        <el-radio-group v-model="ruleForm.handAddStatus">
          <el-radio :label="0">是</el-radio>
          <el-radio :label="1">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="排序属性">
        <el-input v-model="ruleForm.sort" />
      </el-form-item>
      <el-form-item>
        <template #default="scope">
          <el-button type="primary" @click="submitForm">确定</el-button>
          <el-button @click="resetForm">取消</el-button>
        </template>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import type { Ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import * as api from "../../request/api";
import type {
  productAttrItem,
  productAttrParams,
  productAttrRes,
} from "../../request/PmsProductAttributeCategoryController/index";

let route = useRoute();
let router = useRouter();
// console.log(route);
let cid = Number(route.query.cid);
let scid = Number(route.query.scid);
let typet = Number(route.query.type);
console.log(cid);

const ruleFormRef = ref<FormInstance>();
let ruleForm = reactive({
  // 属性名称
  name: "",
  // 商品类型
  productType: "",
  // 分类筛选样式
  filterType: 0,
  //能否进行检索
  searchType: 0,
  //商品属性关联
  relatedStatus: 1,
  //属性是否可选
  selectType: 0,
  //属性值的录入方式
  inputType: 0,
  //属性值可选值列表
  inputList: "",
  //是否支持生动新增
  handAddStatus: 1,
  //排序属性
  sort: 0,
  id: cid,
  productAttributeCategoryId: scid,
  type: 0,
});
//备份
let ruleFormnull = reactive({
  // 属性名称
  name: "",
  // 商品类型
  productType: "",
  // 分类筛选样式
  filterType: 0,
  //能否进行检索
  searchType: 0,
  //商品属性关联
  relatedStatus: 1,
  //属性是否可选
  selectType: 0,
  //属性值的录入方式
  inputType: 0,
  //属性值可选值列表
  inputList: "",
  //是否支持生动新增
  handAddStatus: 1,
  //排序属性
  sort: 0,
  id: cid,
  productAttributeCategoryId: 0,
  type: 0,
});
let ppptype = ref({}) as Ref<productAttrItem>;

const rules = reactive<FormRules>({
  name: [
    { required: true, message: "Please input Activity name", trigger: "blur" },
  ],
});

// 请求
let aac = async () => {
  let cacc = await api.productAttr.getproductAttrList({
    pageNum: 1,
    pageSize: 100,
  });
  ppptype.value = cacc.list;
  console.log(cacc);
};
aac();
// console.log(ppptype);

const submitForm = async () => {
  // console.log(ruleForm);
  if (typet === 0) {
    await api.productAttr.productAttributeadddata({ ...ruleForm });
    console.log("添加");
    router.go(-1);
  } else {
    await api.productAttr.productAttributeupdate({ ...ruleForm });
    console.log("修改");
    router.go(-1);
  }
};

const resetForm = () => {
  ruleForm = ruleFormnull;
};
</script>

<style lang="scss" scoped>
.el-card {
  max-width: 85%;
  margin: 0 auto;
}
</style>
